<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery Slider!</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="jSlider.js"></script>
<style type="text/css">
body{
	background-color:#E9E9E9;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color:#333;
	font-size:1.5em;
	text-shadow: 0 0 1px #FFF;
}
h3{
	margin:1em 0 .35em 0;
	border-bottom:1px solid #999;
}
#main{
	background-color:#FFF;
	border-radius:16px;
	border:5px solid #CCC;
	padding:20px;
	margin:55px;
}
#footer{
	background-color:#FFF;
	border-radius:7px;
	border:1px solid #CCC;
	padding:10px;
	margin:10px 0 0 0;
}
a, a:visited{
	text-decoration:none;
	color:#369;
}
a:hover{
	text-decoration:none;
}
	

.slider {
	border-radius:4px;
	background-color:#CCC;
	width: 100%;
	height: 24px;	
}
.knob {
	border-radius:4px;
	background-color:#333;
	position: relative;
	left: 0;
	width:36px;
	height:24px;
	padding:0;
	margin:0;
	
	color:#CCC;
	font-size: large;
	text-align:center;
}
</style>
</head>
<body>
<div id="main">
<h1 align="center">jSlider demo</h1>
<spam id="t1"></spam><div class="slider" id="slider1"><div class="knob"></div></div><br />
<spam id="t2"></spam><div class="slider" id="slider2"><div class="knob"></div></div><br />
<spam id="t3"></spam><div class="slider" id="slider3"><div class="knob"></div></div><br />
<button id="min"> &lt; </button>
<button id="plus"> &gt; </button>
<button id="en"> enable </button>
<button id="dis"> disable </button>
<button id="val"> val </button>

<div id="footer">&copy;2010 David Gonzalez Garcia - <a href="http://davidxl.blogspot.com">davidxl.blogspot.com/</a></div>
</div>
<script>
$('#slider1').slider({min:0,max:100,val:50,step:5,onchange:function(v){$('#slider1 .knob').html(v)}})
$('#slider2').slider({min:0,max:100,val:50,onchange:function(v){$('#t2').html(Math.round(v))}})
$('#slider3').slider({min:100,max:1000,val:550,onchange:function(v){$('#t3').html(Math.round(v))},onfinish:function(v){}})
$('#min').click(function () {
	$('#slider3').slider('val',$('#slider3').data('val')-10);
})
$('#plus').click(function () {
	$('#slider3').slider('val',$('#slider3').data('val')+10);
})
$('#en').click(function () {
	$('#slider3').slider('enable');
})
$('#dis').click(function () {
	$('#slider3').slider('disable');
})
$('#val').click(function () {
	alert($('#slider3').slider('val'));
})
</script>
</body>
</html>
